<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>规格列表</title>
		<link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/elementui.css" />
		<script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 78px;
				line-height: 78px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 78px;
				display: block;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="规格名">
					<el-input v-model="searchForm.name" placeholder="规格名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="findList">查询</el-button>
					<el-button type="success" @click="dialogFormVisible=true,spec={}">新增</el-button>
					<el-button type="success" onclick="location.href='template.html'">模板列表</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="specList" style="width: 100%" border>
				<el-table-column prop="id" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="name" label="规格名" width="180">
				</el-table-column>
				<el-table-column prop="options" label="规格项" width="500">
				</el-table-column>
				<el-table-column prop="seq" label="排序" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" @click="edit(scope.row.id)" icon="el-icon-edit" circle></el-button>
						<el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" circle></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="findList" @current-change="findList" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
			 :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>

			<!-- 新增窗口 -->
			<el-dialog title="保存规格" :visible.sync="dialogFormVisible">
				<el-form :model="spec">
					<el-form-item label="规格id" label-width="100px" hidden>
						<el-input v-model="spec.id"></el-input>
					</el-form-item>
					<el-form-item label="规格名称" label-width="100px">
						<el-input v-model="spec.name"></el-input>
					</el-form-item>
					<el-form-item label="规格项" label-width="100px">
						<el-input v-model="spec.options" type="textarea" :autosize="{ minRows: 4, maxRows: 10}" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="排序" label-width="100px">
						<el-input v-model="spec.seq" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">保存</el-button>
				</div>
			</el-dialog>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: function() {
					return {
						specList: [],
						total: 100,
						size: 10,
						currentPage: 1,
						searchForm: {},
						dialogFormVisible: false,
						spec: {},
						id: 0,
						templateId :0
					}
				},
				methods: {
					findList() {
						axios.post(`/api/spec/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, this.searchForm)
							.then(
								response => {
									this.specList = response.data.records
									this.total = response.data.total
								}).catch(function(error) {
								console.log(error);
							})
					},
					save() {
						let id = this.spec.id
						let action = id == null ? 'save' : 'update'
						this.spec.options = this.spec.options.replace(/\n/g, ',')
						this.spec.templateId = this.templateId 
						axios.post(`/api/spec/${action}.do`, this.spec).then((response) => {
							if (response.data.code == 1) {
								this.dialogFormVisible = false
								this.$message.error(response.data.msg)
							} else {
								this.dialogFormVisible = false
								this.$message({
									message: response.data.msg,
									type: 'success',
								})
							}
							this.findList()
						}).catch((error) => {
							this.$message({
								message: '添加失败，请重试或请联系管理员',
								type: 'warning',
							})
						})

					},
					edit(id) {
						this.dialogFormVisible = true
						axios.get(`/api/spec/findbyid.do?id=${id}`).then((resp) => {
							this.spec = resp.data
							this.spec.options = this.spec.options.replace(/,/g, "\n");
							this.findList()
						})
					},
					del(id) {
						this.$confirm("确认删除？", '确认删除').then(() => {
							axios.post(`/api/spec/deletebyid.do?id=${id}`).then((response) => {
								if (response.data.code == 1) {
									this.$message.error(response.data.msg)
								} else {
									this.$message.success(response.data.msg)
								}
								this.findList()
							})
						})
					},
					handleAvatarSuccess(res, file) {
						this.brand.image = file.response
					},
					beforeAvatarUpload(file) {
						const isJPG = file.type === 'image/jpeg';
						const isLt2M = file.size / 1024 / 1024 < 2;
						if (!isJPG) {
							this.$message.error('上传头像图片只能是 JPG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						}
						return isJPG && isLt2M;
					}
				},
				created() {
					let arr = location.search.substring(1).split("=")
					let id = arr[1]
					this.searchForm.id = id
					this.templateId = id
					this.findList()
				}
			})
		</script>
	</body>
</html>
